<template>
  <TableDivBox :data="data" @searchBtn="searchBtn" isFull :margin="0">
    <template #headL v-if="$slots.headL">
      <slot name="headL" />
    </template>
    <template #headR v-if="$slots.headR">
      <slot name="headR" />
    </template>
    <el-auto-resizer class="full">
      <template #default="{ height, width }">
        <el-table-v2 :columns="setThead(data)" :data="setTbody(data)" :width="width" :height="height" fixed>
          <template v-slot:header-cell="{ column }">
            {{ column.title }}
          </template>
          <template #cell="{ rowData, column }">
            <template v-if="column.formType === 'tag'">
              <ElTagBox :data="data.tbody[rowData.rowIndex][column.formKey || column.key]" :options="column.options" />
            </template>
            <p v-else-if="typeof column.value === 'function'">
              {{ column.value(data.tbody[rowData.rowIndex]) }}
            </p>
            <div class="flex" v-else-if="column.formType && !!!data.disabled">
              <template v-if="column.formType === 'text'">
                <ElInputBox :data="data.tbody[rowData.rowIndex]" :dataName="column.key" placeholder="请输入" @changeBtn="(value: any) => {
                  changeBtn(column, value, data.tbody[rowData.rowIndex])
                }" />
              </template>
              <template v-else-if="column.formType === 'number'">
                <ElNumberBox :data="data.tbody[rowData.rowIndex]" :dataName="column.key" placeholder="请输入" @changeBtn="(value: any) => {
                  changeBtn(column, value, data.tbody[rowData.rowIndex])
                }" />
              </template>
            </div>
            <p v-else-if="column.key === 'rowIndex'">
              {{ rowData.rowIndex + 1 }}
            </p>
          </template>
        </el-table-v2>
      </template>
    </el-auto-resizer>
  </TableDivBox>
</template>
<script setup lang="ts">
//获取pinia
// import { useUserStore } from '@/store/index';
// const userStores: any = useUserStore();
//获取当前实例
import { getCurrentInstance, onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any; //主数据
    height?: String | Number; //高度
    margin?: number; //间距
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //单选
    selectable?: Function; //是否禁用
  }>(),
  {
    data: {}
  },
);
watch(() => props.data.tbody, (newVal, oldVal) => {
});
const setThead = (table: any) => {
  if (table.thead.length > 0) {
    const _thead = [
      {
        label: '序号',
        prop: 'rowIndex',
        align: 'center', // 默认居中对齐
        width: 60
      },
    ].concat(table.thead)
    return _thead.map((el: any, index: number) => ({
      key: el.prop,
      dataKey: el.prop,
      title: el.label,
      ...el,
    }))
  } else {
    return []
  }
};

const setTbody = (table: any) => {
  if (table.tbody.length > 0) {
    const _tbody = JSON.parse(JSON.stringify(table.tbody)).map((el: any, index: number) => ({
      ...el,
      rowIndex: index,
    }))
    return _tbody.filter((el: any) => typeof table?.filter === 'function' ? table.filter(el) : true)
  } else {
    return []
  }
};
const changeBtn = (btn: any, value: any, row: any) => {
  if (typeof btn.changeBtn === 'function') {
    btn.changeBtn(value, row)
  }
};


const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'searchBtn'): void;
}>();
const searchBtn = () => {
  emit('searchBtn');
};


//多选

onMounted(() => {
});
</script>
<style scoped lang="scss"></style>
